<template>
  <div class="about">
    <a-typography-title :heading="2" style="text-align: center; margin-bottom: 40px;">
      关于肺部CT图像辅助诊断系统
    </a-typography-title>
    
    <a-card class="about-card">
      <a-typography-paragraph>
        本系统是一个基于Vue和ArcoVue的肺部CT图像辅助诊断前端项目，旨在为医生提供简约大方、符合医生使用习惯的肺部CT图像预览和分析工具。系统集成了人工智能辅助诊断功能，可以帮助医生更快速、准确地发现肺部病变。
      </a-typography-paragraph>
      
      <a-typography-title :heading="6">系统主要功能包括：</a-typography-title>
      <a-list>
        <a-list-item>肺部CT图像预览与分析，支持多种窗宽窗位设置</a-list-item>
        <a-list-item>基于深度学习的肺部病变自动检测</a-list-item>
        <a-list-item>肺部病变定量分析和统计</a-list-item>
        <a-list-item>标准化诊断报告生成</a-list-item>
      </a-list>
      
      <a-divider />
      
      <a-descriptions :data="systemInfo" layout="inline-horizontal" size="medium" />
      
      <a-divider />
      
      <a-typography-title :heading="6">肺部CT窗宽窗位设置说明：</a-typography-title>
      <a-table :columns="ctWindowColumns" :data="ctWindowData" :pagination="false" size="small" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
const systemInfo = [
  {
    label: '版本信息',
    value: 'V1.0.0'
  },
  {
    label: '联系我们',
    value: 'example@medical.com'
  },
  {
    label: '技术支持',
    value: '肺部CT图像辅助诊断系统团队'
  }
];

const ctWindowColumns = [
  {
    title: '窗位名称',
    dataIndex: 'name',
  },
  {
    title: '窗宽(WW)',
    dataIndex: 'width',
  },
  {
    title: '窗位(WL)',
    dataIndex: 'level',
  },
  {
    title: '适用情况',
    dataIndex: 'usage',
  }
];

const ctWindowData = [
  {
    name: '肺窗',
    width: '1500',
    level: '-600',
    usage: '观察肺实质、支气管和血管等结构'
  },
  {
    name: '纵隔窗',
    width: '350',
    level: '40',
    usage: '观察纵隔、心脏、大血管等结构'
  },
  {
    name: '骨窗',
    width: '2000',
    level: '500',
    usage: '观察骨骼结构'
  }
];
</script>

<style scoped>
.about {
  padding: var(--spacing-xl);
  max-width: 900px;
  margin: 0 auto;
}

.about-card {
  background-color: var(--color-bg-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

:deep(.arco-card-body) {
  padding: var(--spacing-xl);
}

:deep(.arco-typography-paragraph) {
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
  color: var(--color-text-2);
}

:deep(.arco-typography-title) {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-1);
  font-weight: 600;
}

:deep(.arco-list) {
  margin-bottom: var(--spacing-xl);
}

:deep(.arco-list-item) {
  padding: var(--spacing-xs) 0;
  color: var(--color-text-2);
}

:deep(.arco-divider) {
  margin: var(--spacing-xl) 0;
}

:deep(.arco-descriptions) {
  margin-bottom: var(--spacing-lg);
}

:deep(.arco-descriptions-item-label) {
  color: var(--color-text-3);
  font-weight: 500;
}

:deep(.arco-descriptions-item-value) {
  color: var(--color-text-1);
}

:deep(.arco-table) {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.arco-table-th) {
  background-color: var(--color-fill-2);
  font-weight: 600;
  color: var(--color-text-1);
}

:deep(.arco-table-td) {
  color: var(--color-text-2);
}

:deep(.arco-table-tr:hover td) {
  background-color: var(--color-fill-1);
}
</style> 